<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="renderer" content="webkit">
        <link rel="stylesheet" href="../../css/font.css">
        <link rel="stylesheet" href="../../css/login.css">
        <link rel="stylesheet" href="../../css/xadmin.css">
        <script charset="utf-8" src="../../lib/layui/layui.js"></script>
        <script src="../../js/xadmin.js" type="text/javascript"></script>
        <script src="../../js/vue2.7min.js"></script>
        <script src="../../js/axios.min.js"></script>
        <link href="../../css/xadmin.css" rel="stylesheet"/>
        <!--折线图-->
        <script src="../../js/echarts.min.js"></script>
        <style>

            /*清除样式*/
            body, div, ul, li, h3, a {
                padding: 0;
                margin: 0;
            }

            ul {
                list-style: none;
            }

            .column {
                width: 100%;
                margin-right: 10px;
                border: 1px solid #ccc;
            }

            .column .img {
                float: right;
                width: 100px;
                height: 35px;
                background: no-repeat right;
                margin-right: 10px;
            }

            .tt {
                height: 35px;
                border-bottom: 1px solid #ccc;
            }

            .tt h3 {
                float: left;
                height: 35px;
                line-height: 35px;
                text-indent: 0.5em;
                font-family: "微软雅黑";
                width: 150px;
                border-bottom: 1px solid #56a3df;
            }

            .main {
                font-size: 14px;
                margin: 0px 5px 0px 5px;
            }

            .column ul li {
                margin: 10px 10px 10px 0px;
                text-indent: 1em; /*缩进*/
                background: no-repeat left;
            }

            .column ul li span {
                float: right;
            }

            .column ul li a:hover {
                text-decoration: underline;
                color: red;
            }

            .column li a:link, a:visited {
                text-decoration: none;
                color: black;
            }
        </style>
    </head>
    <body style="width: 100%">
        <div class="layui-fluid" id="app" style="width: 100%">
            <div class="layui-row layui-col-space15" style="width: 100%">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <blockquote class="layui-elem-quote">欢迎管理员：
                                <span class="x-red">{{managerName}}</span>
                                <p id="nowTime">！当前时间:{{nowTime}}</p>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <!--数据统计栏-->
                <div class="layui-col-md12">
                    <div>
                        <div class="layui-card-header">数据统计</div>
                        <div class="layui-card-body ">
                            <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>管理员数量</h3>
                                        <p>
                                            <cite v-text="managerNumber">66</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>供应商数量</h3>
                                        <p>
                                            <cite v-text="supplierNumber">66</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>商品数量</h3>
                                        <p>
                                            <cite v-text="goodsNumber">66</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>用户数量</h3>
                                        <p>
                                            <cite v-text="customerNumber">66</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>商品入库量</h3>
                                        <p>
                                            <cite v-text="buyNumber">66</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6 ">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3>商品出库量</h3>
                                        <p>
                                            <cite v-text="sellNumber">66</cite></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--折线图-->
                <div id="main" class="layui-col-md12" style="width: 100%;height:400px;"></div>
                <div id="main1" class="layui-col-md12" style="width: 100%;height:400px;"></div>
                <!--服务器信息-->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <table class="layui-table">
                                <tbody>
                                <tr>
                                    <th>系统版本</th>
                                    <td>2.0.0</td>
                                </tr>
                                <tr>
                                    <th>服务器地址</th>
                                    <td>本地运行</td>
                                </tr>
                                <tr>
                                    <th>操作系统</th>
                                    <td>win10/11</td>
                                </tr>
                                <tr>
                                    <th>运行环境</th>
                                    <td>Apache Tomcat 8</td>
                                </tr>
                                <tr>
                                    <th>java版本</th>
                                    <td>1.8</td>
                                </tr>
                                <tr>
                                    <th>项目运行方式</th>
                                    <td>jar</td>
                                </tr>
                                <tr>
                                    <th>MYSQL版本</th>
                                    <td>5.5.53</td>
                                </tr>
                                <tr>
                                    <th>mybatis-plus版本</th>
                                    <td>5.0.18</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--作者信息-->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <table class="layui-table">
                                <tbody>
                                <tr>
                                    <th>开发者</th>
                                    <td>王大明 学号：2020111111</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--VUE-->
        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data: {
                    //Manager信息
                    managerId: null,
                    managerName: null,
                    managerPassword: null,
                    managerRealName: null,
                    managerSex: null,
                    managerPhone: null,
                    managerState: null,
                    managerLevel: null,
                    //index页面数据
                    managerNumber: null,
                    supplierNumber: null,
                    warehouseNumber: null,
                    goodsNumber: null,
                    customerNumber: null,
                    buyNumber: null,
                    sellNumber: null,
                    //折线图
                    buyArray: [],
                    sellArray: [],
                    buyArray1: [],
                    sellArray1: [],
                    //公告
                    noticeId: null,
                    noticeTitle: null,
                    noticeMessage: null,
                },
                methods: {
                    //获取管理员信息
                    getManager() {
                        axios.post("../../../manager/getManager")
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    //Manager信息
                                    vm.managerId = response.data.data.managerId;
                                    vm.managerName = response.data.data.managerName
                                    vm.managerPassword = response.data.data.managerPassword
                                    vm.managerRealName = response.data.data.managerRealName
                                    vm.managerSex = response.data.data.managerSex
                                    vm.managerPhone = response.data.data.managerPhone
                                    vm.managerState = response.data.data.managerState
                                    vm.managerLevel = response.data.data.managerLevel
                                }
                            }, function (err) {
                                console.log(err);

                            })
                    },
                    getNowTime() {
                        let vWeek, vWeek_s;
                        vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                        let date = new Date();
                        let year = date.getFullYear();
                        let month = date.getMonth() + 1;
                        let day = date.getDate();
                        let hours = date.getHours();
                        let minutes = date.getMinutes();
                        let seconds = date.getSeconds();
                        vWeek_s = date.getDay();
                        document.getElementById("nowTime").innerHTML = year + "年" + month + "月" + day + "日" + "  " + hours + ":" + minutes + ":" + seconds + "  " + vWeek[vWeek_s];
                    },
                    //获得welcome页面的初始数据
                    initDate1() {
                        axios.post("../../../welcome/initDate1")
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    //数据统计
                                    vm.managerNumber = response.data.data.managerNumber;
                                    vm.supplierNumber = response.data.data.supplierNumber;
                                    vm.warehouseNumber = response.data.data.warehouseNumber;
                                    vm.goodsNumber = response.data.data.goodsNumber;
                                    vm.customerNumber = response.data.data.customerNumber;
                                    vm.buyNumber = response.data.data.buyNumber;
                                    vm.sellNumber = response.data.data.sellNumber;
                                }
                            }, function (err) {
                                console.log(err);

                            })
                    },

                    //获得welcome页面的初始数据
                    initDate2() {
                        axios.post("../../../welcome/initDate2")
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    //折线图
                                    vm.buyArray = response.data.data.buyArray;
                                    vm.sellArray = response.data.data.sellArray;
                                    vm.buyArray1 = response.data.data.buyArray1;
                                    vm.sellArray1 = response.data.data.sellArray1;
                                    // console.log(vm.buyArray)
                                    // console.log(vm.sellArray)
                                }
                            }, function (err) {
                                console.log(err);

                            })
                    },
                    //公告
                    getNotice() {
                        axios.post("../../../notice/getLastOne")
                            .then(function (response) {
                                console.log(response);
                                vm.msg = response.data.msg;
                                //判断是否登录
                                if (response.data.code === 1) {
                                    //页面跳转
                                    vm.noticeId = response.data.data.noticeId;
                                    vm.noticeTitle = response.data.data.noticeTitle;
                                    vm.noticeMessage = response.data.data.noticeMessage;
                                }
                            }, function (err) {
                                console.log(err);

                            })
                    },

                },
                mounted: function () {

                    //查询管理员信息
                    this.getManager();
                    //时间
                    setInterval(this.getNowTime, 1000);
                    //welcome页面初始数据
                    this.initDate1();
                    this.initDate2();
                    //公告
                    this.getNotice();

                }
            });

        </script>
        <script>
            setTimeout(function () {
                //延迟执行的代码开始

                /*折线图*/
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '出入库折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['入库量（统计）', '出库量（统计）']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '入库',
                            type: 'line',
                            stack: '总量',
                            data: vm.buyArray
                        },
                        {
                            name: '出库',
                            type: 'line',
                            stack: '总量',
                            data: vm.sellArray
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);


                //延迟执行的代码结束
                console.log("延迟执行的代码");
            }, 500);

        </script>
        <script>
            setTimeout(function () {
                //延迟执行的代码开始

                /*折线图*/
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('main1'));

                // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: '出入库折线图堆叠面积图'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['入库量（统计）', '出库量（统计）']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '入库',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: vm.buyArray1
                        },
                        {
                            name: '出库',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: vm.sellArray1
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option1);


                //延迟执行的代码结束
                console.log("延迟执行的代码");
            }, 500);

        </script>
    </body>
</html>